<template>
  <div class="container">
    <swiper :autoplay="{ delay: 5000, disableOnInteraction: true }" :modules="modules" :loop="true">
      <swiper-slide v-for="(item, index) in data.topSlide" :autoplay="{ delay: 5000, disableOnInteraction: true }" :modules="modules" :key="String(index)">
        <div class="headBox">
          <video class="video" :poster="item.pic_url" :src="item.video_url" autoplay muted playsinline="1" webkit-playsinline="1" v-if="item.video_url"></video>
          <div class="bg" :style="{backgroundImage: `url(${item.pic_url})`}" v-else></div>
          <div class="body flex-y flex-y-center flex-x-center">
            <div class="col-f  txt1 animate__animated animate__fadeInUp">{{item.title}}</div>
            <div class="txt2  col-f animate__animated animate__fadeInUp">{{item.brief}}</div>
            <div class="bottomLine mb-60 animate__animated animate__zoomIn"></div>
            <div class="button-container animate__animated animate__zoomIn">
              <button class="glow-button" style="--btn-color: #ffffff;" @click="scrollToNext">
                了解更多>>
              </button>
            </div>

          </div>
        </div>
      </swiper-slide>
    </swiper>

    <div class="briefBox" v-slide :ref="el => sectionRefs[0] = el">

      <div class="warpBox">
        <el-row :gutter="24" class="rowBox">
          <el-col :span="11" :xs="24">
            <div class="left animate__animated animate__fadeInLeft" v-if="isShowStatistic">
              <img class="titleImg" src="@/assets/images/txtImg2.png" />
              <h3 class="fnt_40 mb-30 one-line-hide">{{data.about.title}}</h3>
              <ClientOnly>
                <div class="brefBox  fnt_20 col-3 mb-20 line24 " v-html="data.about.content">

                </div>

                <div class="numBox b-f flex-row ">
                  <div class="numItem flex-box flex-y">
                    <span class="txt1 fnt_20 col-f">项目案例</span>
                    <el-statistic class="fnt_60 " :value="outputValue[0]"></el-statistic>

                  </div>
                  <div class="bar"></div>
                  <div class="numItem flex-box flex-y">
                    <span class="txt1 fnt_20">企业员工</span>
                    <el-statistic class="fnt_60 col-m" :value="outputValue[1]"></el-statistic>
                  </div>
                  <div class="bar"></div>
                  <div class="numItem flex-box flex-y">
                    <span class="txt1 fnt_20">企业合作伙伴</span>
                    <el-statistic class="fnt_60 col-m" :value="outputValue[2]"></el-statistic>
                  </div>
                  <div class="bar"></div>
                  <div class="numItem flex-box flex-y">
                    <span class="txt1 fnt_20">企业合作伙伴</span>
                    <el-statistic class="fnt_60 col-m" :value="outputValue[3]"></el-statistic>
                  </div>

                </div>
              </ClientOnly>
            </div>
          </el-col>
          <el-col :span="13" :xs="24">
            <div class="right animate__animated animate__fadeInRight" v-if="isShowStatistic">
              <NuxtLink :to="{path: `/article/${data.about.article_id}`}">
                <img class="img" :src="data.about.image_url" />
              </NuxtLink>
              <div class="anchorPoint flex-y">
                <div v-for="item,index in scrollsLIist" @click="scrollToSection(index)" :class="['scrollItem', 't-c']">{{ item }}</div>
              </div>
            </div>
            <div v-else class="shell"></div>
          </el-col>
        </el-row>
      </div>

    </div>
    <div class="bodyBox" :ref="el => sectionRefs[1] = el">
      <h2 class="title col-2 t-c">团队风采</h2>
      <div class="wrapBox">
        <el-row :gutter="24" v-for="item in newListData">
          <el-col :span="6" :xs="24" v-for="itemf in item">
            <NuxtLink :to="{path: `/article/${itemf.article_id}`}" class="item cursor" v-slide>
              <div class="imgBox">
                <img class="img" :src="itemf.image_url" />
              </div>
              <div class="bottom b-f">
                <div class="txt1  col-2 t-c oneline-hide">{{itemf.title}}</div>

              </div>
            </NuxtLink>

          </el-col>

        </el-row>

      </div>
    </div>
    <div class="cardBox dis-flex" :ref="el => sectionRefs[2] = el" v-slide>

      <NuxtLink :to="{path: `/article/${data.concept.article_id}`}" class="cardItem flex-box" :style="{backgroundImage: `url(${data.concept.image_url})`}">
        <div class="maskBox flex-y flex-y-center">
          <img class="iconImg" src="@/assets/images/jyln.png" />
          <h3 class="txt1 col-f t-c fnt_30">{{ data.concept.title }}</h3>
          <div class="bar"></div>
          <div class="txt2  col-f t-c fnt_30">{{data.concept.e_title}}</div>
          <p class="txt3 col-f t-c fnt_30 ">{{data.concept.brief}}</p>
        </div>
        <div class="mask2"></div>
      </NuxtLink>
      <NuxtLink :to="{path: `/article/${data.culture.article_id}`}" class="cardItem flex-box" :style="{backgroundImage: `url(${data.culture.image_url})`}">
        <div class="maskBox flex-y flex-y-center">
          <img class="iconImg" src="@/assets/images/jyln.png" />
          <h3 class="txt1 col-f t-c fnt_30">{{ data.culture.title }}</h3>
          <div class="bar"></div>
          <div class="txt2  col-f t-c fnt_30">{{data.culture.e_title}}</div>
          <p class="txt3 col-f t-c fnt_30">{{data.culture.brief}}</p>
        </div>
        <div class="mask2"></div>
      </NuxtLink>
      <NuxtLink :to="{path: `/article/${data.companyValues.article_id}`}" class="cardItem flex-box" :style="{backgroundImage: `url(${data.companyValues.image_url})`}">
        <div class="maskBox flex-y flex-y-center">
          <img class="iconImg" src="@/assets/images/jyln.png" />
          <h3 class="txt1 col-f t-c fnt_30">{{ data.companyValues.title }}</h3>
          <div class="bar"></div>
          <div class="txt2  col-f t-c fnt_30">{{data.companyValues.e_title}}</div>
          <p class="txt3 col-f t-c fnt_30">{{data.companyValues.brief}}</p>
        </div>
        <div class="mask2"></div>
      </NuxtLink>
      <NuxtLink :to="{path: `/article/${data.companyVision.article_id}`}" class="cardItem flex-box" :style="{backgroundImage: `url(${data.companyVision.image_url})`}">
        <div class="maskBox flex-y flex-y-center">
          <img class="iconImg" src="@/assets/images/jyln.png" />
          <h3 class="txt1 col-f t-c fnt_30">{{ data.companyVision.title }}</h3>
          <div class="bar"></div>
          <div class="txt2  col-f t-c fnt_30">{{data.companyVision.e_title}}</div>
          <p class="txt3 col-f t-c fnt_30">{{data.companyVision.brief}}</p>
        </div>
        <div class="mask2"></div>
      </NuxtLink>

    </div>
    <div class="addressBox" :ref="el => sectionRefs[3] = el" v-slide>
      <h2 class="title col-2 t-c">公司地址</h2>
      <div class="wrapBox">
        <el-row :gutter="24">
          <el-col :span="9" :xs="24">
            <div class="info flex-y">
              <span class="fnt_30 mb-30">{{ settingData.setting.company.name }}</span>
              <div class="content fnt_20 mb-10 flex-y col-9">
                <div class="flex-row mb-2"><span class="f0 a-f-s">地 址：</span>{{ settingData.setting.company.address }}</div>
                <div class="flex-row mb-2"><span class="f0 a-f-s">邮 编：</span>{{ settingData.setting.company.email }}</div>
                <div class="flex-row mb-2"><span class="f0 a-f-s">电 话：</span>{{ settingData.setting.company.tel }}</div>

                <span class="mb-15">二维码：</span>
                <img class="img" :src="settingData.setting.company.wechat_qrcode" />
              </div>
            </div>

          </el-col>
          <el-col :span="15" :xs="24">
            <div id="map" class="mapBox"></div>
          </el-col>

        </el-row>

      </div>

    </div>

    <div class="joinBox" v-slide :ref="el => sectionRefs[4] = el">
      <h2 class="title col-f t-c">联系我们</h2>
      <div class="wrapBox flex-y">
        <el-form ref="formEl" :model="joinForm" :rules="joinRules" label-width="116px" label-position="left">
          <el-row :gutter="24">
            <el-col :span="12" :xs="24">
              <el-form-item prop="user_name" label="您的姓名：">
                <el-input v-model="joinForm.user_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :xs="24">
              <el-form-item prop="mobile" label="您的电话：">
                <el-input v-model="joinForm.mobile"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="city" label="所在城市：">
            <el-input v-model="joinForm.city"></el-input>
          </el-form-item>
          <el-form-item prop="content" label="留言：">
            <el-input type="textarea" v-model="joinForm.content"></el-input>
          </el-form-item>

        </el-form>
        <div class="btnBox flex-row">
          <el-button type="primary" style="width: 160px; height: 43px" @click="formHandle(formEl)">
            提交
          </el-button>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="js">
import "swiper/css";
import 'swiper/css/pagination'
import { Autoplay} from 'swiper/modules';
 const modules = [Autoplay];
import serverRequest from '~/composables/useServerRequest';
import clientRequest from '~/composables/useClientRequest';
import { getDimensionaArr } from "@/utils/tool";
import { useTransition, TransitionPresets } from "@vueuse/core";
import { vaildPhoneNumber } from "@/utils/regular";
const settingData = await serverRequest.get('home/setting');

onMounted(() => {
  const innerWidth = window.innerWidth
  if(innerWidth < 768){
    pageData.isShowStatistic = true
  }

  window.addEventListener('scroll', handleScroll);
  initMap()
});
// 在组件卸载前移除事件监听器
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

const data = await serverRequest.get('about/index');
/**
 * 头部设置
 */
 const keywords = computed(() => {
  const topSlide = data.topSlide
  const newKeywords =  data.topSlide.map(item => item.title).join(',')
  return newKeywords
});

const description = computed(() => {
  const topSlide = data.topSlide
  const newDescription =  data.topSlide.map(item => item.brief).join(',')
  return newDescription
});
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk}-关于我们` : '红河大成房地产';
  },
  meta: [
    { name: 'keyword', content: keywords },
    { name: 'description', content:description }
  ]
})
const pageData = reactive({
  scrollsLIist:['公司介绍','团队风采','经营理念','公司地址','加入我们'],
  activeIndex:0,
  isShowStatistic:false,
  joinForm:{
    user_name:'',
    mobile:'',
    city:'',
    content:''
  },
  joinRules:{ 
  user_name: [{ required: true, message: "请输入您的姓名" }], 
  mobile: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("请输入手机号码"));
        } else if (!vaildPhoneNumber(value)) {
          callback(new Error("请输入正确的手机号"));
        } else {
          callback();
        }
      },
    }
  ],
   city: [{ required: true, message: "请输入您的所在城市" }], 
   content: [{ required: true, message: "请输入留言" }],}
});
const { scrollsLIist,activeIndex ,isShowStatistic,joinForm,joinRules} = toRefs(pageData);
const statisticData = ref([0,0,0,0]);
const outputValue =  useTransition(statisticData, {
  duration: 1500,
  transition: TransitionPresets.easeOutExpo
})
function inintStatisticData(){
  const {project_case_num,customer_num,partner_num,honor_num} = settingData.setting.company
statisticData.value = [project_case_num,customer_num,partner_num,honor_num]
}


// 滚动区域的引用
function scrollToNext(){
  window.scrollTo({ top: window.innerHeight - 90, behavior: 'smooth' });
}


const newListData = computed(() => {
  const newListData = data.teamList
  return getDimensionaArr(newListData,4);
});

const sectionRefs = ref([])
// 处理点击Tab，滚动到对应的Section顶部
const scrollToSection = (index) => {

  if (sectionRefs.value[index]) {
    const targetOffset = sectionRefs.value[index].offsetTop ;
    window.scrollTo({ top: targetOffset, behavior: 'smooth' });
    pageData.activeIndex = index;
  }
};

// 监听滚动，动态更新当前选中的Tab
const handleScroll = () => {
  const scrollY =  window.scrollY
  if(scrollY > 100 &&pageData.isShowStatistic == false){
    pageData.isShowStatistic = true
    inintStatisticData()
  }
  let currentActive = 0;
  sectionRefs.value.forEach((el, index) => {
    if (el.offsetTop  <= scrollY) {
      currentActive = index;
    }
  });
  pageData.activeIndex = currentActive;
};
const initMap = () => {
  const center = new qq.maps.LatLng(settingData.setting.company.latitude, settingData.setting.company.longitude);
  var map = new qq.maps.Map(document.getElementById("map"), {
    // 地图的中心地理坐标。
    center: center,
    zoom: 13,
    disableDefaultUI: true, //禁止所有控件
  });
  var label = new qq.maps.Label({
    position: center,
    map: map,
    content: settingData.setting.company.name,
  });
  var marker = new qq.maps.Marker({
    position: center,
    map: map,
  });
};
const formEl = ref();
async function formHandle(formEl) {
  if (!process.client) return;
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      const loadingInstance = ElLoading.service({ fullscreen: true });
      clientRequest.post('message/submit',{
        form:pageData.joinForm
      })
        .then((result) => {
          // 显示发送成功
          ElMessage({
            message: result.msg,
            type: "success",
          });
          setTimeout(() => {
            updateSuccess();
          }, 1500);
        })
        .catch((err) => { })
        .finally(() => {
          loadingInstance.close();
        });
    }
  });
}
function updateSuccess(){
  pageData.joinForm = {
    user_name:'',
    mobile:'',
    city:'',
    content:''
  }
}
</script>

<style lang="scss" scoped>
@use "./index.scss";
</style>
